<template>
<div  style="display:flex;flex:1;flex-direction: column;width:100%;">
<!-- <div  :id="`${pie}${id}`"  style="width:100%;height: 220px;flex:1;" class="xs-col-12"></div> -->
<chart :options="pieOption" :auto-resize="true" style="width:100%;height: 220px;"></chart>
<p style="text-align:center">消费者选择{{aaa}}</p>
</div>
</template>
<script>
export default {
  props: {
    id: "",
    pie: "",
    
    piePriceData: {},
    pieRoleData: {},
    pieSeeData: {},
    pieSaleData:{}
  },
  data() {
    return {
      myChartPie: {},
      pieOption:{},
      opction: {
        startColor: "#fff",
        endColor: "#ebebeb"
      }
    };
  },
  created() {
    console.log(this.piePriceData);
    let startColor, endColor;
    switch (this.id) {
      case 0:
        startColor = "#f6d666";
        endColor = "#faa188";
        break;
      case 1:
        startColor = "#c7e168";
        endColor = "#6cd682";
        break;
      case 2:
        startColor = "#4bcf9f";
        endColor = "#41c6ca";
        break;
      case 3:
        startColor = "#66bdf5";
        endColor = "#8ea0ea";
        break;
    }
    this.opction = {
      startColor,
      endColor
    };
  },
  updated(){
    
  },
  mounted() {
    console.log("-------------------");
    console.log(this.pieRoleData, this.piePriceData);
    console.log(this.pieSeeData);
    if (this.piePriceData) {
      let priceNum = this.piePriceData.countRatio;
      this.darwPie(priceNum);
    } else if (this.pieRoleData) {
      let roleNum = this.pieRoleData.ratio;
      this.darwPie(roleNum);
    } else if (this.pieSeeData) {
      let see = this.pieSeeData.ratio;
      this.darwPie(see);
    }else if(this.pieSaleData){
      let sale=this.pieSaleData.ratio
      this.darwPie(sale)
    }
  },
  methods: {
    //画环形图
    darwPie(e) {
      // 绘制图表
      var value = e * 100;
      var unit = "%";
      var initcolor = "#333333";
      var min = 0;
      var max = 100;
      var color = initcolor;
      var size = "100%";
      var background = "#fff"; //背景
      this.pieOption= {
        title: {
          text: Math.round(value) + unit,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: color,
            fontSize: parseInt(size) * 0.2
          }
        },
        backgroundColor: "#fff",
        center:['50%','50%'],
        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: true,
            radius: ["40%", "50%"],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: this.opction.startColor
                
              }
            },
            hoverAnimation: false,
            data: [
              {
                value: value - min,
                name: "01",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: this.opction.startColor // 0th% 处的颜色
                        },
                        {
                          offset: 1,
                          color: this.opction.endColor // 100% 处的颜色
                        }
                      ]
                    }
                  }
                }
              },
              {
                value: max - value,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#ebebeb", //未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
            ]
          }
        ]
      };
    }
  },
  computed: {
    aaa: function() {
      if (this.piePriceData) {
        return this.piePriceData.priceSegment + "元";
      } else if (this.pieRoleData) {
        return this.pieRoleData.technology;
      } else if (this.pieSeeData) {
        return this.pieSeeData.description;
      }else if(this.pieSaleData){
return this.pieSaleData.description
      }
    }
  },
  watch:{
    piePriceData(e){
      this.darwPie(e.countRatio);
    },
    pieRoleData(e){
      this.darwPie(e.ratio);
    },
    pieSeeData(e){
     this.darwPie(e.ratio);
    },
     pieSaleData(e){
       this.darwPie(e.ratio);
     }
  }
};
</script>
<style>
</style>
